export const useColorMode = () => {
    // 响应式状态
    const colorMode = useState('color-mode', () => 'light')
    
    // 切换函数
    const toggleColorMode = () => {
      colorMode.value = colorMode.value === 'light' ? 'dark' : 'light'
      
      // 更新 HTML 类名
      if (process.client) {
        if (colorMode.value === 'dark') {
          document.documentElement.classList.add('dark')
        } else {
          document.documentElement.classList.remove('dark')
        }
        // 保存到本地存储
        localStorage.setItem('color-mode', colorMode.value)
      }
    }
    
    // 初始化函数
    const initColorMode = () => {
      if (process.client) {
        // 优先从本地存储读取
        const savedMode = localStorage.getItem('color-mode')
        
        // 如果没有保存的偏好，则尝试使用系统偏好
        if (!savedMode) {
          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
          colorMode.value = prefersDark ? 'dark' : 'light'
        } else {
          colorMode.value = savedMode
        }
        
        // 应用到 HTML
        if (colorMode.value === 'dark') {
          document.documentElement.classList.add('dark')
        } else {
          document.documentElement.classList.remove('dark')
        }
      }
    }
    
    return {
      colorMode,
      toggleColorMode,
      initColorMode
    }
  }